<!--
* @author wn
* @date 2022/06/22 15:56:43
* @description: 商品详情 评价右侧  --24热榜+专题推荐
!-->
<template>
	<div class="goods-hot">
		<!-- 通过对象  key 计算出  对应名称 -->
		<h3>{{ title }}</h3>
		<good-item v-for="item in list" :key="item.id" :good="item" />
	</div>
</template>
<script>
import GoodItem from '@/views/category/components/GoodItem'
import { ref, computed } from 'vue'
import { findGoodsHot } from '@/network/product'
import { useRoute } from 'vue-router'
export default {
	name: 'GoodsHot',
	components: { GoodItem },
	props: {
		type: {
			type: Number,
			default: 1,
		},
	},
	setup(props) {
		const obj = { 1: '24小时热销榜', 2: '热销周榜', 3: '热销总榜' }
		const title = computed(() => obj[props.type])
		// 通过API  获取 热销榜
		const list = ref([])
		// 通过路由获取  当前商品id
		const route = useRoute()
		findGoodsHot({ id: route.params.id, type: props.type }).then(
			({ result }) => (list.value = result)
		)
		return { title, list }
	},
}
</script>
<style scoped lang="less">
.goods-hot {
	h3 {
		height: 70px;
		line-height: 70px;
		background: @helpColor;
		color: #fff;
		font-size: 18px;
		padding-left: 25px;
		margin-bottom: 10px;
		font-weight: 500;
	}
	:deep(.goods-item) {
		background: #fff;
		width: 100%;
		margin-bottom: 10px;
		img {
			width: 200px;
			height: 200px;
		}
		p {
			margin: 0 10px;
		}
		&:hover {
			transform: none;
			box-shadow: none;
		}
	}
}
</style>
